<template>
    <div class="container">
        <div class="left">
            <ul>
                <li class="item">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-weibiaoti--"></use>
                    </svg>
                    <span>好友动态</span>
                </li>
            </ul>
        </div>
        <div class="right">
            <ul>

                <!-- <li class="shuoshuo">
                    <div class="nav">
                        <div class="leftnav">
                            <img class="avatar" src="../../../assets/img/pkq.jpg" alt="">
                            <div class="info">
                                <div class="name">梦羽</div>
                                <div class="date">2024年11月11日 10:19</div>
                            </div>
                        </div>
                        <div class="rightnav">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shixiangxiajiantou--copy-copy"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="content">
                        <p>关于昨夜梦中梦到昨日H题于噩梦中惊醒，后来难过了好一阵子。由于本人看数学背景题比看树论背景题更感兴趣，优先看了M题，实质上H题比较简单易想，后来为M题打了上百行但思路差了一些，花费了巨大的时间和精力，这一行为导致最后时间还在冲刺M题，而思考H题的时间我估计也不过5分钟吧，对此，这场的失败跟我有很大关系，如果我再多花一些精力在H题上，很大概率结果不会是这样。
                            最后，感谢我的队友，可能和你们一起过题的日子已经结束了，但我们的回忆依然留在我的心底。</p>
                        <img src="../../../assets/img/p1.webp" alt="">
                    </div>
                    <div class="tip">
                        <p>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-hetongxiaoshoujiicon"></use>
                            </svg>
                            <span>来自 Redmi Note 11 SE (5G)</span>
                        </p>
                    </div>
                    <div class="shuoshuofooter">
                        <div class="left">
                            <span>浏览149次</span>
                        </div>
                        <div class="right">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-dianzan_kuai-copy"></use>
                            </svg>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-liuyanfill"></use>
                            </svg>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zhuanfa"></use>
                            </svg>
                        </div>
                    </div>
                    <hr />
                    <div class="dianzan">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-dianzan"></use>
                        </svg>
                        <span>
                            梦羽、王良炫、23林煜超、胡付安、徐海天、楼鑫垚、22徐峥扬、22计算机应罗毅、徐诗怡、22桑汉成、23赵子腾、李婷共12人觉得很赞
                        </span>
                    </div>
                    <div class="pinglun">
                        <ul class="list">
                            <li class="pinglun-item">
                                <div class="avatar">
                                    <img src="../../../assets/img/lyc.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p class="content">
                                        <span class="name">23林煜超 : </span>
                                        我们队也有遗憾，要是a题早点想出并查集结果也不一样了
                                    </p>
                                    <p class="date">2024年11月11日 18:45</p>
                                </div>
                            </li>
                            <li class="pinglun-item">
                                <div class="avatar">
                                    <img src="../../../assets/img/pkq.jpg" alt="">
                                </div>
                                <div class="info">
                                    <p class="content">
                                        <span class="name">梦羽 : </span>
                                        呜呜呜我们第三发才写并查集，之前也wa了两发，浪费了一些时间
                                    </p>
                                    <p class="date">2024年11月11日 18:45</p>
                                </div>
                            </li>
                        </ul>
                        <div class="inputPingLun">
                            <input class="pinglun-input" type="text" placeholder="评论">
                        </div>
                    </div>
                </li> -->

                <li class="shuoshuo" v-for="item in shushuo_list" :key="item.shuoshuo_id">
                    <!-- {{ item }} -->
                    <!-- 头部 -->
                    <div class="nav">
                        <div class="leftnav">
                            <img class="avatar" :src="item.u_avatar_url" alt="">
                            <div class="info">
                                <div class="name">{{ item.u_name }}</div>
                                <div class="date">{{ convertISODateToLocal(item.date) }}</div>
                            </div>
                        </div>
                        <div class="rightnav">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-shixiangxiajiantou--copy-copy"></use>
                            </svg>
                        </div>
                    </div>
                    <!-- 内容 -->
                    <div class="content">
                        <p v-html="item.text_content"></p>
                        <img v-for="(item2, index) in item.imgList" :key="index" :src="item2" alt=""
                            :class="item.imgCss" @click="openPreview(item.imgList, index)">
                    </div>
                    <div class="shuoshuofooter">
                        <div class="left">
                            <span>浏览{{ item.browser_count }}次</span>
                        </div>
                        <div class="right">
                            <svg @click="changeDianZan(item.shuoshuo_id)"
                                v-if="item.likeList.some(like => like.u_id === store.state.userid)" class="icon"
                                aria-hidden="true">
                                <use xlink:href="#icon-dianzan_kuai-copy"></use>
                            </svg>
                            <svg @click="changeDianZan(item.shuoshuo_id)" v-else class="icon" aria-hidden="true">
                                <use xlink:href="#icon-dianzan_kuai"></use>
                            </svg>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-liuyanfill"></use>
                            </svg>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-zhuanfa"></use>
                            </svg>
                        </div>
                    </div>
                    <hr />
                    <div class="dianzan" v-if="item.likeList.length > 0">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-dianzan"></use>
                        </svg>
                        <span>
                            {{item.likeList.map(item => item.name).join('、')}}
                            共{{ item.likeList.length }}人觉得很赞
                        </span>
                    </div>
                    <div class="pinglun">
                        <ul class="list">
                            <li class="pinglun-item" v-for="(item2, index) in item.commentList" :key="index">
                                <div class="avatar">
                                    <img :src="item2.avatar" alt="">
                                </div>
                                <div class="info">
                                    <p class="content">
                                        <span class="name">{{ item2.name }} : </span>
                                        {{ item2.content }}
                                    </p>
                                    <p class="date">{{ convertISODateToLocal(item2.date) }}</p>
                                </div>
                            </li>
                        </ul>
                        <div class="inputPingLun">
                            <input class="pinglun-input" type="text" placeholder="评论"
                                @keyup.enter="addComment(item.shuoshuo_id, $event.target.value)">
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <!-- 图片预览模态框 -->
        <div class="image-preview-modal" v-if="showPreview" @click.self="closePreview">
            <div class="modal-content">
                <img :src="previewImage" alt="预览图片" class="preview-image">
                <div class="image-nav">
                    <span class="image-index">{{ currentImageIndex + 1 }} / {{ currentImageList.length }}</span>
                    <button class="close-btn" @click="closePreview">×</button>
                </div>
                <button class="nav-btn prev-btn" @click.stop="prevImage" v-if="currentImageList.length > 1">❮</button>
                <button class="nav-btn next-btn" @click.stop="nextImage" v-if="currentImageList.length > 1">❯</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useStore } from 'vuex'

import api from '../../../api/index'

const store = useStore();

// 日期转化格式
import { convertISODateToLocal } from '../../../utils/dateUtils';

// 当前用户名
const username = ref('')

// 说说列表
const shushuo_list = ref([])

// 预览图片
const showPreview = ref(false);
const previewImage = ref('');
const currentImageList = ref([]);
const currentImageIndex = ref(0);

// 打开图片预览
const openPreview = (images, index) => {
    currentImageList.value = images;
    currentImageIndex.value = index;
    previewImage.value = images[index];
    showPreview.value = true;
    // 禁止背景滚动
    document.body.style.overflow = 'hidden';
};

// 关闭图片预览
const closePreview = () => {
    showPreview.value = false;
    // 恢复背景滚动
    document.body.style.overflow = '';
};

// 上一张图片
const prevImage = () => {
    currentImageIndex.value = (currentImageIndex.value - 1 + currentImageList.value.length) % currentImageList.value.length;
    previewImage.value = currentImageList.value[currentImageIndex.value];
};

// 下一张图片
const nextImage = () => {
    currentImageIndex.value = (currentImageIndex.value + 1) % currentImageList.value.length;
    previewImage.value = currentImageList.value[currentImageIndex.value];
};

// 获取说说列表
const http = async () => {
    const res = await api.getAllShuoShuoList();
    // console.log(res);
    shushuo_list.value = res.data;

    // 将说说列表按照日期date字段，数据类型为datetime，降序排序
    shushuo_list.value.sort((a, b) => new Date(b.date) - new Date(a.date));
    // console.log(shushuo_list.value);
    shushuo_list.value.forEach((item) => {
        // 点赞列表
        Object.assign(item, { likeList: [] });
        // 评论列表
        Object.assign(item, { commentList: [] });
        // 图片列表
        Object.assign(item, { imgList: [] });
        // 图片样式
        Object.assign(item, { imgCss: '' });
        // 获取点赞列表
        api.getShuoShuoLikeList({ shuoshuo_id: item.shuoshuo_id }).then(result => {
            // console.log(result);
            if (result.code === 200) {
                result.data.forEach(itemLike => {
                    // 根据u_id获取用户名
                    api.getUserInfo({ userid: itemLike.u_id }).then(res => {
                        if (res.code === 200) {
                            const user = res.data[0];
                            item.likeList.push({ name: user.name, u_id: user.id });
                        }
                    })
                })
                // console.log(item.likeList);
            }
        })
        // 获取评论列表
        api.getShuoShuoCommentList({ shuoshuo_id: item.shuoshuo_id }).then(async result => {
            // console.log(result);
            if (result.code === 200) {
                // 使用 Promise.all 等待所有用户信息查询
                const commentsWithUserInfo = await Promise.all(
                    result.data.map(async (itemComment) => {
                        const res = await api.getUserInfo({ userid: itemComment.u_id });
                        if (res.code === 200) {
                            const user = res.data[0];
                            return {
                                ...itemComment,
                                name: user.name,
                                avatar: user.avatar_url
                            };
                        }
                        return itemComment;
                    })
                );
                item.commentList = commentsWithUserInfo;
                // console.log("完整评论数据:", item.commentList);
            }
        })
        // 获取图片列表
        api.getShuoShuoImageList({ shuoshuo_id: item.shuoshuo_id }).then(result => {
            // console.log(result);
            if (result.code === 200) {
                result.data.forEach(itemImg => {
                    item.imgList.push(itemImg.img_url);
                })
                if (item.imgList.length === 1) {
                    item.imgCss = 'img1';
                } else if (item.imgList.length === 2) {
                    item.imgCss = 'img2';
                } else {
                    item.imgCss = 'img3';
                }
            }
        })
    })
}


onMounted(async () => {
    http();
    // 获取用户名
    const res = await api.getUserInfo({ userid: store.state.userid })
    if (res.code === 200) {
        username.value = res.data[0].name;
    }
})

// 添加评论
const addComment = async (shuoshuo_id, content) => {

    const res = await api.getUserInfo({ userid: store.state.userid })
    if (res.code === 200) {
        const info = res.data[0];
        // console.log(info);
        const res2 = await api.insertComment({ shuoshuo_id, content, u_id: info.id, date: convertISODateToLocal(new Date().toISOString()) });
        if (res2.code === 200) {
            // 刷新，重新获取评论列表
            http();
        }
    }
    // 将pinglun-input清空
    document.querySelectorAll('.pinglun-input').forEach(item => {
        item.value = '';
    });

};

// 改变点赞情况
const changeDianZan = async (shuoshuo_id) => {
    const res = await api.getShuoShuoLikeList({ shuoshuo_id });
    if (res.code === 200) {
        const likeList = res.data.map(item => item.u_id);

        // 如果存在，删除点赞
        if (likeList.includes(store.state.userid)) {
            const res2 = await api.deleteLike({ shuoshuo_id, u_id: store.state.userid });

        }
        // 如果不存在，添加点赞
        else {
            const res2 = await api.insertLike({ shuoshuo_id, u_id: store.state.userid });
        }

        // 刷新
        http();
    }
}

</script>

<style lang="less" scoped>
.container {
    width: 1100px;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;

    .left {
        width: 200px;

        .item {
            width: 80%;
            height: 40px;
            background-color: #f6f6f6;
            display: flex;
            align-items: center;

            .icon {
                margin: 0 10px;
            }

            span {
                font-weight: bold;
            }
        }
    }

    .right {
        width: 600px;
        margin-left: 40px;

        .shuoshuo {
            margin-bottom: 20px;
            background-color: white;
        }

        .nav {
            display: flex;
            justify-content: space-between;
            padding: 15px;

            .leftnav {
                display: flex;

                .avatar {
                    width: 50px;
                    height: 50px;
                    margin: 0;
                    border-radius: 50%;
                }

                .info {
                    font-size: 14px;
                    margin-left: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;

                    .date {
                        color: #999;
                    }

                }
            }




        }

        .content {
            padding: 0 15px;

            p {
                line-height: 1.3;
                margin-bottom: 10px;
            }

            img {
                margin: 0;
                display: inline-block;
                object-fit: cover;
            }

            .img1 {
                width: 100%;
                height: 600px;
            }

            .img2 {
                width: 50%;
                height: 300px;
            }

            .img3 {
                width: 33%;
                height: 200px;
            }
        }

        .tip {
            padding: 10px 15px;
            font-size: 14px;
            color: #999;

            .icon {
                width: 15px;
                height: 15px;
                margin-right: 5px;
            }
        }

        .shuoshuofooter {
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
                font-size: 14px;
                color: #999;
            }

            .right {
                width: 180px;
                display: flex;
                justify-content: space-around;
                align-items: center;

                .icon {
                    width: 26px;
                    height: 26px;
                    cursor: pointer;
                }
            }
        }

        .dianzan {
            padding: 10px 15px;
            line-height: 1.2;
            color: #295c9d;
            font-size: 14px;

            .icon {
                width: 18px;
                height: 18px;
                margin-right: 10px;
            }
        }

        .pinglun {
            padding: 10px 15px;

            .pinglun-item {
                display: flex;
                margin-bottom: 20px;

                .avatar {
                    img {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                    }
                }

                .info {
                    display: flex;
                    flex-direction: column;

                    .content {
                        line-height: 1.2;
                    }

                    .date {
                        margin-top: 5px;
                        margin-left: 15px;
                        color: #999;
                        font-size: 14px;
                    }
                }
            }

            .pinglun-input {
                border: 1px solid #ccc;
                width: 100%;
                height: 30px;
            }

            .pinglun-input::placeholder {
                padding-left: 10px;
                color: #ccc;
            }
        }
    }
}

.image-preview-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;

    .modal-content {
        position: relative;
        max-width: 90%;
        max-height: 90%;

        .preview-image {
            max-width: 100%;
            max-height: 80vh;
            display: block;
            margin: 0 auto;
            cursor: zoom-out;
        }

        .image-nav {
            position: absolute;
            top: 10px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            color: white;

            .close-btn {
                background: none;
                border: none;
                color: white;
                font-size: 30px;
                cursor: pointer;
                padding: 5px 15px;
            }
        }

        .nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            font-size: 30px;
            padding: 20px;
            cursor: pointer;
            border-radius: 50%;

            &.prev-btn {
                left: 20px;
            }

            &.next-btn {
                right: 20px;
            }

            &:hover {
                background: rgba(0, 0, 0, 0.8);
            }
        }
    }
}

.content img {
    cursor: zoom-in;
    transition: transform 0.2s;

    &:hover {
        transform: scale(1.02);
    }
}
</style>